// import './style.css'
// import React, { Suspense } from 'react'
import React from 'react'
import { Tabs } from 'antd-mobile'
import { useSolution } from './useSolution'
// import Title from '@/components/HomeTitle'
// import ArticleCard from '@/components/ArticleCard'

const LazyTitle = React.lazy(() => import('@/components/HomeTitle'))
const LazyArticle = React.lazy(() => import('@/components/GeneralCard'))

const Solution = () => {
    // 逻辑业务
    const { headers,items } = useSolution()
    // UI 渲染
    return (
      <div>
        {/* <Title caption={headers}/> */}
        <LazyTitle caption={headers}/>

        <Tabs defaultActiveKey={'0'}>
          {items.map((item) => (
            <Tabs.Tab title={item.title} key={item.id}>
              {/* list组件 */}
              {/* 别忘嘞加上类名 严格控制滚动盒子 */}
              <div className="li">
                {item.SolutionList.map((i) => (
                  // <ArticleCard src={i.default_image} title={i.title} />
                  <LazyArticle src={i.default_image} link={`/solution/detail/${i.id}`} title={i.title} />

                ))}
                
              </div>
            </Tabs.Tab>
          ))}
        </Tabs>
      </div>
    )
  }
  
  export default Solution
  